<template>
    <div class="wrapper">
         <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide v-for="item in dataList" :key="item.id">
                <img class="swiper-img" :src=" item.imgUrl " alt="">
            </swiper-slide>
           
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
          
        </swiper>
    </div>
</template>

<script>
export default {
    name:'HomeSwiper',
    data() {
      return {
        swiperOption: {
          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          // ...
          pagination: ".swiper-pagination",
          loop: true
        },
        dataList:[
            {
                id:"01",
                imgUrl:"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/667757f979fa38b12c4986f9930b6695.jpg_750x200_6cca7add.jpg"

        },
        {
                id:"0002",
                imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/98/0a2e0bd8eb0c0802.png_750x200_0a34d4a8.png"
        },
         {
                id:"0003",
                imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/98/0a2e0bd8eb0c0802.png_750x200_0a34d4a8.png"
        }
        ]
      }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper>>> .swiper-pagination-bullet-active
    background-color #fff
.wrapper{
    width 100%
    overflow hidden
    height 0
    padding-bottom 26.25%
    background-color #ccc
  .swiper-img {
        width 100%
    }

}
</style>
